<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<section class="">
    <div class="btn btn-close btn-block alert-dismissable u-alert">
        <button aria-hidden="true" data-dismiss="alert" class="close" type="button" title="关闭">×</button>
        <span class="ml20" th:text="'已保存 '+${#lists.size(userAddresses)}+' 条收货地址-还可增加'+${3 - #lists.size(userAddresses)}+'条'"></span>
    </div>
    <table class="table uTable table-hover">
        <thead>
        <tr>
            <th width="10%">收货人</th>
            <th width="20%">所在地区</th>
            <th width="20%">详细地址</th>
            <th width="15%">手机号码</th>
            <th width="10%">邮编</th>
            <th width="25%">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:if="${!#lists.isEmpty(userAddresses)}" th:each="userAddress:${userAddresses}">
            <td th:text="${userAddress['receiver']}"></td>
            <td th:text="${userAddress['province']['areaName']}+''+${userAddress['city']['areaName']}+''+${userAddress['town']['areaName']}"></td>
            <td th:text="${userAddress['address']}"></td>
            <td th:text="${userAddress['mobile']}"></td>
            <td th:text="${userAddress['postCode']}"></td>
            <td>
                <a href="javascript:void(0);" class="c-666 updateUserAddress" th:attr="data-id=${userAddress['id']}"   data-toggle="tooltip" data-placement="top" data-original-title="修改">修改</a>
                <a href="javascript:void(0);" id="deleteUserAddress" th:attr="data-id=${userAddress['id']}" class="c-666 ml5" data-toggle="tooltip" data-placement="top" data-original-title="删除">删除</a>
                <a th:if="${userAddress['status']}==1"  class="defaultBtn" data-toggle="tooltip" data-placement="top" data-original-title="默认地址">默认地址</a>
                <a th:if="${userAddress['status']}==2" class="btn btn-info  btn-xs setDefault" id="updateUserAddressStatus" th:attr="data-id=${userAddress['id']}" data-status="1" data-toggle="tooltip" data-placement="top" data-original-title="默认地址">默认地址</a>
            </td>
        </tr>
        <tr th:if="${#lists.isEmpty(userAddresses)}">
            <td colspan="6" class="text-center">
                <p><span class="c-4e fs16">亲，还没有数据~~~</span></p>
            </td>
        </tr>
        </tbody>
    </table>
    <article class="mt20 pt10">
        <div class="orderTitle hLh30 mt10">
            <i class="fa fa-circle-o"></i>
            <span class="fs16 c-333 ml5">添加收货地址</span>
        </div>
        <form id="addUserAddress">
            <input type="hidden" name="id" value=""/>
            <section class="form-horizontal">
            <div class="form-group form-column">
                <label class="col-sm-2 control-label text-right unFw"><span class="mr20"><tt class="c-danger fs12 mr5">*</tt>收货人姓名</span></label>
                <div class="col-sm-10 form-main">
                    <input placeholder="收货人姓名"  name="receiver" class="form-control" type="text">
                    <hr>
                </div>
            </div>
            <div class="form-group form-column">
                <label class="col-sm-2 control-label text-right unFw"><span class="mr20"><tt class="c-danger fs12 mr5">*</tt>联系电话</span></label>
                <div class="col-sm-10 form-main">
                    <input placeholder="联系手机号"  name="mobile" class="form-control" type="text">
                    <hr>
                </div>
            </div>
            <div class="form-group form-column">
                <label class="col-sm-2 control-label unFw text-right"><span class="mr20"><tt class="c-danger fs12 mr5">*</tt>所在地区</span></label>
                <div class="col-sm-10 form-main">
                    <section class="row">
                        <div class="col-sm-4">
                            <select class="form-control vam" style="display: inline-block;width: 90%;padding-bottom: 0" onchange="queryNewAddress(this.value, 1, 0)" id="areaType_0" name="provinceId">
                                <option selected value="0">--请选择省--</option>
                            </select>
                            <span class="c-999 vam">省</span>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control vam" style="display: inline-block;width: 90%;padding-bottom: 0" onchange="queryNewAddress(this.value, 2, 0)" id="areaType_1" name="cityId">
                                <option selected value="0">--请选择市--</option>
                            </select>
                            <span class="c-999 vam">市</span>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control vam" style="display: inline-block;width: 80%;padding-bottom: 0" id="areaType_2" name="townId">
                                <option selected value="0">--请选择县--</option>
                            </select>
                            <span class="c-999 vam">区/县</span>
                        </div>
                    </section>
                    <hr>
                </div>
            </div>
            <div class="form-group form-column">
                <label class="col-sm-2 control-label unFw text-right"><span class="mr20"><tt class="c-danger fs12 mr5">*</tt>详细地址</span></label>
                <div class="col-sm-10 form-main">
                    <input placeholder="请具体到路名/门牌号" name="address"  class="form-control" type="text">
                    <hr>
                </div>
            </div>
            <div class="form-group form-column">
                <label class="col-sm-2 control-label unFw text-right"><span class="mr20"><tt class="c-danger fs12 mr5">*</tt>邮编</span></label>
                <div class="col-sm-10 form-main">
                    <input placeholder="100010" name="postCode" class="form-control" type="text">
                    <hr>
                </div>
            </div>
            <div class="form-group mt20">
                <label class="col-sm-2 control-label unFw">&nbsp;</label>
                <label class="col-sm-3 control-label unFw checkbox-inline" style="text-align: left;">
                    <input type="checkbox" name="status" value="1" id="inlineCheckbox1">
                    <span class="c-999">设为常用用收货地址</span>
                </label>
                <div class="col-sm-6 text-right">
                    <button type="button" id="addAddRessBtn" class="btn btn-info btn-rounded mr20">保存收货地址</button>
                </div>
            </div>
        </section>
        </form>
    </article>
</section>